<template>
  <div class="container">
    <el-card shadow="always">
      <el-tabs v-model="query.classify" @tab-click="tabClick">
        <el-tab-pane
          label="常规性自查"
          name="1"
          v-if="
            data.bodyindustry != '食品生产企业' &&
            data.bodyindustry != '食品销售经营者' &&
            data.bodyindustry != '食品流通经营者'
          "
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-date-picker
                v-model="query.month"
                :clearable="false"
                :picker-options="pickerOptions"
                type="month"
                placeholder="选择月份"
                value-format="yyyy-MM"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="query.taskState"
                placeholder="请选择处置状态"
                :clearable="false"
              >
                <el-option
                  v-for="(item, index) in [
                    { text: '自查状态', value: '-1' },
                    { text: '未完成', value: '0' },
                    { text: '已完成', value: '1' },
                    { text: '不需完成', value: '2' },
                  ]"
                  :key="index"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  query.page = 1;
                  getList();
                "
                >查询</el-button
              >
            </el-col>
            <el-col :span="2">
              <calendar
                classify="1"
                @view="onView"
                name="常规性自查日历"
              ></calendar>
            </el-col>
          </el-row>
          <rz-height></rz-height>
          <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="taskDate" label="任务日期">
               <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.frequencyType == 0 ||
                    scope.row.frequencyType == 5 ||
                    scope.row.frequencyType == 6
                  "
                >
                  {{ scope.row.year }}-{{ scope.row.noyear }}
                </div>
                <div v-else>
                  {{ scope.row.taskName }}第{{ scope.row.taskNumber
                  }}{{ scope.row.frequencyType == "7" ? "周" : "次" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="checkusername" label="自查人员">
              <template slot-scope="scope">
                {{ scope.row.checkusername || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="自查结果情况">
              <template slot-scope="scope">
                {{ scope.row.remark || "--" }}
              </template>
            </el-table-column>
            <el-table-column label="自查状态">
              <template slot-scope="scope">
                <div v-if="scope.row.taskStatus == 0">暂未自查</div>
                <div v-else-if="scope.row.taskStatus == 1">已自查</div>
                <div v-else>未自查原因:{{ scope.row.completeExplain }}</div>

                <!-- data == "食品生产经营者" ||
      data == "食品销售经营者" ||
      data == "食品流通经营者" -->
              </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="任务状态"> </el-table-column> -->
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    size="mini"
                    type="primary"
                    v-if="scope.row.taskStatus == 1"
                    @click="onView(scope.row)"
                    >查看</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            :total="total"
            @pagination="getList"
            :page.sync="query.page"
          />
        </el-tab-pane>
        <el-tab-pane label="全项目自查" name="2">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-date-picker
                v-model="query.year"
                :picker-options="pickerOptions"
                :clearable="false"
                type="year"
                placeholder="选择年份"
                value-format="yyyy"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  query.page = 1;
                  getList();
                "
                >查询</el-button
              >
            </el-col>
            <!-- <el-col :span="2">
            <calendar classify="2" @view="onView" name="全项目自查日历"></calendar>
           </el-col> -->
          </el-row>

          <rz-height></rz-height>
          <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="taskDate" label="任务日期">
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.frequencyType == 0 ||
                    scope.row.frequencyType == 5 ||
                    scope.row.frequencyType == 6
                  "
                >
                  {{ scope.row.year }}{{ scope.row.noyear }}
                </div>
                <div v-else>
                  {{ scope.row.taskName }}第{{ scope.row.taskNumber
                  }}{{ scope.row.frequencyType == "7" ? "周" : "次" }}
                </div>
              </template>

              <!-- <block wx:if="{{item.frequencyType==0||item.frequencyType==5||item.frequencyType==6}}">
              <view class=" center title">
                {{item.taskWeek}}
              </view>
              <view class="  center" wx:if="{{item.frequencyType==0||item.frequencyType==5||item.frequencyType==6}}">
                {{item.year}}
              </view>
              <view class=" center">
                {{item.noyear}}
              </view>
            </block>
            <block wx:else>
              <view class=" center title">
                {{item.taskName}}
              </view>
              <view class="  center">
                {{item.year}}
              </view>
              <view class=" center">
                第{{item.taskNumber}}{{item.frequencyType=='7'?'周':'次'}}
              </view>
            </block> -->
            </el-table-column>
            <el-table-column prop="checkusername" label="自查人员">
              <template slot-scope="scope">
                {{ scope.row.checkusername || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="自查结果情况">
              <template slot-scope="scope">
                {{ scope.row.remark || "--" }}
              </template>
            </el-table-column>

            <el-table-column label="自查状态">
              <template slot-scope="scope">
                <div v-if="scope.row.taskStatus == 1">已自查</div>
                <div v-else-if="scope.row.completeExplain">
                  未自查原因:{{ scope.row.completeExplain }}
                </div>
                <div v-else>暂未自查</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="任务状态"> </el-table-column> -->
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    size="mini"
                    type="primary"
                    v-if="scope.row.taskStatus == 1"
                    @click="onView(scope.row)"
                    >查看</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            @pagination="getList"
            :page.sync="query.page"
          />
        </el-tab-pane>
        <el-tab-pane label="针对性自查" name="3">
          <el-date-picker
            v-model="query.year"
            :picker-options="pickerOptions"
            :clearable="false"
            type="year"
            placeholder="选择年份"
            value-format="yyyy"
          >
          </el-date-picker>
          <el-button type="primary" @click="getList">查询</el-button>
          <rz-height></rz-height>

          <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="checkdatetime" label="检查日期" width="180">
            </el-table-column>
            <el-table-column prop="pertinencetitle" label="标题" width="180">
            </el-table-column>
            <el-table-column prop="checkusername" label="检查人">
            </el-table-column>
            <el-table-column prop="checkresult" label="复查结果">
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="onView(scope.row)"
                    >查看</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="自查报告" name="4">
          <el-date-picker
            v-model="query.year"
            :picker-options="pickerOptions"
            :clearable="false"
            type="year"
            placeholder="选择年份"
            value-format="yyyy"
          >
          </el-date-picker>
          <el-button
            type="primary"
            @click="
              query.page = 1;
              getList();
            "
            >查询</el-button
          >

          <div v-for="item in list" :key="item.id">
            <rz-height></rz-height>

            <div>{{ item.startDate }}—{{ item.endDate }}</div>
            <rz-height></rz-height>
            <el-image
              v-for="items in item.url"
              :key="items"
              style="width: 150px; height: 150px; margin-right: 10px"
              :src="items"
              fit="fill"
              :preview-src-list="[items]"
            ></el-image>

            <rz-height></rz-height>
            <div>
              <a
                :href="items"
                target="_blank"
                v-for="(items, index) in item.file"
                :key="items"
                >附件{{ index + 1 }}</a
              >
            </div>
            <rz-height></rz-height>
          </div>
          <el-empty description="暂无数据" v-if="!list.length"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 针对性自查查看 -->
    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看针对性自查"
    >
      <el-form label-width="160px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题">
              {{ PertinenceInspect.checkdatetime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查日期">
              {{ PertinenceInspect.checkusername }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="检查人">
              {{ PertinenceInspect.checkusername }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="自查内容(存在的问题)">
              {{ PertinenceInspect.checkcontent }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="问题成因">
              {{ PertinenceInspect.causeproblem }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改措施">
              {{ PertinenceInspect.correctivemeasures }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="复查结果">
          {{ PertinenceInspect.checkresult }}
        </el-form-item>
        <el-form-item label="整改照片">
          <el-image
            v-for="item in PertinenceInspect.list"
            :key="item.id"
            style="width: 150px; height: 150px; margin-right: 10px"
            :src="item.fileUrl"
            fit="fill"
            :preview-src-list="PertinenceInspect.list.map((x) => x.fileUrl)"
          ></el-image>
        </el-form-item>
      </el-form>
    </rz-dialog>

    <!-- 常规性&&全项目自查 -->
    <rz-dialog
      :dialogVisible.sync="dialogVisibleCheckResult"
      :isShowConfirm="false"
      :title="query.classify == 1 ? '查看常规性自查' : '查看全项目自查'"
    >
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="自查日期">
              {{ CheckResult.checkdatetime }}
            </el-form-item>
          </el-col>
            <el-col :span="12">
          <el-form-item label="完成时间">
              {{ CheckResult.completionDate }}
            </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
            <el-form-item label="自查人员">
              {{ CheckResult.checkusername }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查结果情况">
              {{ CheckResult.remark|| "--"  }}
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <div class="list">
      <div class="item" wx:for="{{list}}" wx:key="idx" wx:for-index="idx">
        <div class="menu">
          <div class="title">
            {{item.itemname}}
          </div>
          <div class="submenu" wx:for="{{item.list}}" wx:key="index" wx:for-item="items">
            <div class="submenu_title">
              <rich-text nodes=" {{items.itemno}}、{{items.itemcontent}}"></rich-text>
            </div>
            <div class="radio_wapper">
              <div>
                检查结果:
              </div>
              <div class="green" wx:if="{{items.check==1}}">
                合格
              </div>
              <div class="red" wx:if="{{items.check==2}}">
                不合格
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
        <!-- <el-form-item label=""> -->
        <div v-for="item in CheckResult.list" :key="item.id" class="list">
          <div class="title">{{ item.checkItemname }}</div>
          <div v-for="items in item.list" :key="items.id" class="item">
            <span> {{ items.itemno }}、 </span>
            <span v-html="items.itemcontent"></span>
            <rz-height></rz-height>
            <div>
              检测结果
              <span v-if="items.checkresult == '合格'" class="green">{{
                items.checkresult
              }}</span>
              <span v-else class="red">{{ items.checkresult }}</span>
            </div>
          </div>
        </div>
        <!-- </el-form-item> -->
        <!--  <el-form-item label="整改照片">
          <el-image
          v-for="item in PertinenceInspect.list"
          :key="item.id"
            style="width: 200px; height: 200px"
            :src="item.fileUrl"
            fit="cover"
            :preview-src-list="PertinenceInspect.list.map(x=>x.fileUrl)"
          ></el-image>
        </el-form-item> -->
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
import {
  findUnitCheckResultListNew,
  findPertinenceInspectList,
  findUnitCheckResultInfoById,
  QueryselfExaminationReportList,
} from "@/api/modules/enterprise";
import calendar from "@/views/enterprise/components/calendar";
import { CompanyMainPageInfo } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    if(this.$route.query.classify){
        this.query.classify=this.$route.query.classify
    }
    this.query.month = this.$moment().format("YYYY-MM");
    this.getCompanyMainPageInfo();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      activeName: "second",
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < new Date("2021-01-01").getTime()
          );
        },
      },
      query: {
        classify: "1",
        ifOut: "",
        isPage: 0,
        month: "",
        page: 1,
        pageSize: 10,
        title: 1,
        taskState: "-1",
        unitId: sessionStorage.getItem("interpretation"),
        year: `${new Date().getFullYear()}`,
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      PertinenceInspect: {},
      dialogVisibleCheckResult: false,
      CheckResult: {},
      list: [],
      data: {},
    };
  },
  // 方法
  methods: {
    tabClick(e) {
      this.getList();
    },
    getList() {
      this.query.title = this.query.classify;
      if (this.query.classify == 1 || this.query.classify == 2) {
        findUnitCheckResultListNew(this.query).then((res) => {
          this.tableData = res.data;
          this.total = res.totalCount;
        });
      } else if (this.query.classify == 3) {
        findPertinenceInspectList(this.query).then((res) => {
          this.tableData = res.data;
          this.total = res.totalCount;
        });
      } else {
        QueryselfExaminationReportList(this.query).then((res) => {
          res.data.forEach((item) => {
            item.url = [];
            item.file = [];
            item.urlList.forEach((x) => {
              if (x.match(/[^\.]\w*$/)[0] !== "pdf") {
                item.url.push(x);
              } else {
                item.file.push(x);
              }
            });
          });
          this.list = res.data;
          this.total = res.totalCount;
        });
      }
    },
    onView(e) {
      if (this.query.classify == 1 || this.query.classify == 2) {
        //
        findUnitCheckResultInfoById({
          id: e.id,
        }).then((res) => {
          this.dialogVisibleCheckResult = true;
          this.CheckResult = res.data;
        });
      } else if (this.query.classify == 3) {
        this.PertinenceInspect = e;
        this.dialogVisible = true;
      }
    },
    getCompanyMainPageInfo() {
      CompanyMainPageInfo({
        params: {
          id: sessionStorage.getItem("interpretation"),
        },
      }).then((res) => {
        if (
          res.data.bodyindustry == "食品生产企业" ||
          res.data.bodyindustry == "食品销售经营者" ||
          res.data.bodyindustry == "食品流通经营者"
        ) {
          this.query.classify = "2";
        }
        this.data = res.data;
    this.getList();

      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: { calendar },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  .el-button {
    margin: 0 10px;
  }
  .list {
    padding: 10px;
    .item {
      padding: 10px 30px;
    }
    .title {
      font-weight: 600;
      font-size: 14px;
    }
  }
  .green {
    color: #008000;
  }
  .red {
    color: #ff0000;
  }
  a {
    text-decoration: underline;
    color: $default;
  }
}
</style>